<template>
<div class="app-container">
<el-card shadow="never" class="panel">
<div slot="header" class="panel__header"><i class="el-icon-collection panel__icon"></i><div class="panel__title">数据请求</div></div>


<el-form :inline="true" :model="q" class="mb12">
<el-form-item label="类别"><el-select v-model="q.category" clearable placeholder="全部"><el-option label="电网数据" value="grid"/><el-option label="设备日志" value="log"/></el-select></el-form-item>
<el-form-item label="关键字"><el-input v-model="q.keyword" placeholder="名称/描述" clearable/></el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="fetchList">查询</el-button>
<el-button icon="el-icon-refresh" @click="reset">重置</el-button>
</el-form-item>
</el-form>


<el-table :data="list" v-loading="loading" stripe border>
<el-table-column type="index" width="60"/>
<el-table-column prop="name" label="名称" min-width="160"/>
<el-table-column prop="category" label="类别" width="120"/>
<el-table-column prop="updateTime" label="更新时间" width="180"/>
<el-table-column label="操作" width="220">
<template slot-scope="scope">
<el-button type="text" @click="preview(scope.row)">预览</el-button>
<el-button type="text" @click="apply(scope.row)">申请阅览</el-button>
<el-button type="text" @click="download(scope.row)">下载</el-button>
</template>
</el-table-column>
</el-table>


<div class="pager">
<el-pagination background layout="prev, pager, next, ->, total" :total="total" :page-size="q.pageSize" :current-page.sync="q.pageNum" @current-change="fetchList" />
</div>
</el-card>


<request-permission v-model="permDlg" :resource-id="current && current.id" resource-type="file" @done="onPermDone" />


<el-drawer :visible.sync="previewDlg" title="数据预览" size="50%">
<div v-if="current">
<el-descriptions :column="2" border>
<el-descriptions-item label="名称">{{ current.name }}</el-descriptions-item>
<el-descriptions-item label="类别">{{ current.category }}</el-descriptions-item>
<el-descriptions-item label="更新时间">{{ current.updateTime }}</el-descriptions-item>
<el-descriptions-item label="描述">{{ current.description || '-' }}</el-descriptions-item>
</el-descriptions>
<el-alert class="mt12" type="info" :closable="false" show-icon title="此处可放数据摘要或图表预览（根据后端返回）"/>
</div>
</el-drawer>
</div>
</template>


<script>
import request from '@/utils/request'
import RequestPermission from './requestPermission.vue'
export default { name:'RequestData', components:{ RequestPermission }, data(){ return { q:{ pageNum:1, pageSize:10, category:'', keyword:'' }, list:[], total:0, loading:false, permDlg:false, previewDlg:false, current:null } }, methods:{ async fetchList(){ this.loading=true; try{ const res= await request({ url:'/data/list', method:'get', params:this.q }); this.list=res.rows||[]; this.total=res.total||0 }finally{ this.loading=false } }, reset(){ this.q={ pageNum:1, pageSize:10, category:'', keyword:'' }; this.fetchList() }, preview(row){ this.current=row; this.previewDlg=true }, apply(row){ this.current=row; this.permDlg=true }, async download(row){ window.open(row.downloadUrl) }, onPermDone(){ this.$message.success('申请成功，等待审批') } }, mounted(){ this.fetchList() } }
</script>


<style scoped>
.mb12{ margin-bottom:12px }
.panel{ border:1px solid #ebeef5 }
.panel__header{ display:flex; align-items:center; gap:8px }
.panel__icon{ color:#5d86ff }
.pager{ margin-top:12px; text-align:right }
.mt12{ margin-top:12px }
</style>